<template>
  <el-card>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公共管理</el-breadcrumb-item>
      <el-breadcrumb-item>新闻公告管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- search搜索框 -->
    <el-row :gutter="30">
      <el-col :span="10">
        <el-input placeholder="请输入内容" v-model="queryInfo.keyWord" clearable @clear="getAllNews">
          <el-button slot="append" icon="el-icon-search" @click="getAllNews"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addDialogVisible = true">发布新闻</el-button>
      </el-col>
    </el-row>
    <!-- 主体table -->
    <el-table :data="newsList" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="发布人" prop="userName"></el-table-column>
      <el-table-column label="发布时间" prop="createTime"></el-table-column>
      <el-table-column label="新闻标题" prop="newsTitle"></el-table-column>
      <el-table-column label="新闻内容">
        <template slot-scope="scope">
          <!-- 查看新闻内容 -->
          <el-button type="primary" size="mini" icon="el-icon-tickets" @click="showNewsDesc(scope.row)"></el-button>
        </template>
      </el-table-column>
      <el-table-column label="删除">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-delete" @click="removeNews(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加新闻对话框 -->
    <el-dialog
      class="addNews-dialog"
      title="发布新闻"
      :visible.sync="addDialogVisible"
      width="80%"
      :before-close="addNewsDialogClose"
    >
      <el-input type="textarea" :rows="1" placeholder="请输入新闻标题" v-model="addNewsTitle"></el-input>
      <quill ref="quillRef" @emitContent="emitContent"></quill>
      <el-button type="primary" @click="addNews()"> 发布</el-button>
    </el-dialog>
    <!-- 查看新闻对话框 -->
    <el-dialog :title="this.lookNewsTitle" :visible.sync="lookDialogVisible" width="80%">
      <div v-html="lookNewsDesc">
        {{ lookNewsDesc }}
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import quill from '../../components/quillEditor/quillEditor.vue'
import commonServe from '../../api/services/common.serve'
export default {
  components: {
    quill
  },
  data() {
    return {
      queryInfo: {
        keyWord: '',
        pageSize: '',
        pageIndex: ''
      },
      userId: window.sessionStorage.getItem('userId'),
      newsList: [],
      addNewsTitle: '', //添加的新闻的标题
      addDialogVisible: false, //控制发布新闻对话框
      lookDialogVisible: false, //查看新闻对话框
      newsContent: '', //子组件传过来的值
      lookNewsTitle: '', //查看新闻对话框标题
      lookNewsDesc: '' //查看新闻对话框内容
    }
  },
  created() {
    this.getAllNews()
  },
  methods: {
    // 获取全部新闻列表
    getAllNews() {
      commonServe
        .getAllNewsList()
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.newsList = res.data.list
          } else {
            this.$message.warning('获取新闻列表失败')
          }
        })
        .catch((err) => {
          this.$message.warning(err.message)
        })
    },
    // 接收子组件传值
    emitContent(val) {
      // console.log(val, '子传父')
      this.newsContent = val
    },
    // 发布新闻
    addNews() {
      console.log('发布新闻')
      let params = {
        newsTitle: this.addNewsTitle,
        newsDesc: this.newsContent
      }
      if (!this.addNewsTitle || !this.newsContent) return this.$message.warning('新闻标题或新闻内容不能为空')
      commonServe
        .addNews(this.userId, params)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success('新闻发布成功')
            this.addNewsTitle = ''
            this.$refs.quillRef.$data.content = ''
            this.getAllNews()
            this.addDialogVisible = false
          } else {
            this.$message.warning('新闻发布失败')
          }
        })
        .catch((err) => {
          this.$message.warning(err.message)
        })
    },
    // 发布新闻对话框关闭
    addNewsDialogClose() {
      this.addNewsTitle = ''
      // 清空子组件的值
      this.$refs.quillRef.$data.content = ''
      this.addDialogVisible = false
    },
    // 查询新闻内容
    showNewsDesc(val) {
      console.log(val)
      this.lookNewsTitle = val.newsTitle
      // 转码
      var decodeNewsDesc = val.newsDesc.replace(/&lt;/g, '<')
      var decodeNewsDesc = decodeNewsDesc.replace(/&gt;/g, '>')
      this.lookNewsDesc = decodeNewsDesc
      this.lookDialogVisible = true
    },
    // 删除新闻
    async removeNews(val) {
      console.log(val)
      const confirmResult = await this.$confirm('此操作将永久删除该新闻，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除新闻')
      }
      // 接口删除
      commonServe
        .removeNewsById(val)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.getAllNews()
          } else {
            this.$message.warning('删除失败')
          }
        })
        .catch((err) => {
          this.$message.warning(err.message)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.addNews-dialog {
  .el-button {
    width: 100%;
    margin-top: 20px;
  }
}
</style>
